<%-- 
    Document   : view
    Created on : 2015-5-2, 16:14:17
    Author     : hayate
--%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%
    String picpath = request.getContextPath() + "/pictures/";
    //String picpath = "http://localhost/pictures/";
%>
<div class ="container-fluid" style="">
    <div class="row">
        <div class="col-md-7">
            <h3>Hello ${dressing.title}</h3>
            <h5>by <a href="${pageContext.request.contextPath}/users/${dressing.user.id}/show">${dressing.user.name}</a></h5>
            <div style="text-align: center;margin-bottom: 30px;">
                <div class="img-container">
            <img src="<%=picpath%>${dressing.pictureName}" style="max-width: 600px;margin: 0 auto;">
            </div>
            <div class="caption" style="text-align: left;">
                ${dressing.caption}
            </div>
            <div style="border-bottom: 1px solid #d6dee5;margin-bottom: 15px;padding-bottom: 15px;"></div>
            <ul class="media-list" style="width: 600px;">
            <c:forEach var="opinion" items="${dressing.opinions}">
                <li class="media">
                    <div class="media-body" style="text-align: left;">
                        <h6 class="media-heading"><a href="${pageContext.request.contextPath}/users/${opinion.user.id}/show">${opinion.user.name}</a></h6>
                        <p class="comment-body">${opinion.content}</p>
                    </div>
                    <div class="media-right">
                        <div class="media-object" style="width: 64px; height: 64px;padding-top: 10px;">
                            <span id="" style="display: block;">${fn:length(opinion.votes)}</span>
                            <a class="vote" 
                               href="${pageContext.request.contextPath}/opinions/${opinion.id}/votes" 
                                       style="color: red;">
                                        <span class="glyphicon glyphicon-heart-empty" aria-hidden="true" 
                                  width="64px" height="64px" style="display: block;"></span></a>
                        </div>
                        <script>
                          $(".vote").click(function() {
                              /*
                              var addr = $(this).attr('href');
                              $.post(addr,
                              {},
                              function(data, status) {
                                  alert(data);
                              });
                              return false;
                              */
                          });                               
                        </script>
                            
                    </div>
                </li>
            </c:forEach>
            </ul>
        </div>
            
            <%--<div style="border-bottom: 1px solid #d6dee5"></div>
            <a href="${pageContext.request.contextPath}/dressings/${dressing.id}/edit">编辑</a>
</div>--%>
    </div>
</div>
